<template>
  <div id="agreementDialog">
    <el-dialog
      class="about-set"
      :title="title"
      :visible.sync="dialogData.isShow"
      width="620px"
      top="50px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="版本号" prop="version">
            <el-input
              clearable
              placeholder="版本号"
              maxlength="20"
              show-word-limit
              v-model.trim="ruleForm.version"
              :disabled="disabled"
            ></el-input>
          </el-form-item>
          <el-form-item label="协议内容" prop="content">
            <div class="eidtor-box">
              <Kind-editor
                ref="kindeditor"
                :content="ruleForm.content"
                :items="items"
                :readOnly="disabled"
                @input="getContent"
                :isLoadEditor="dialogData.isShow"
              ></Kind-editor>
            </div>
          </el-form-item>
          <el-form-item label="协议类型" prop="type">
            <el-select
              v-model="ruleForm.type"
              placeholder="所有"
              :disabled="disabled"
            >
              <el-option
                v-for="item in typeList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="展示端" prop="terminalType">
            <el-checkbox-group v-model="ruleForm.terminalType">
              <el-checkbox
                v-for="item in showList"
                :key="item.dictValue"
                :label="item.dictValue"
              >
                {{ item.dictLabel }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="补充说明" prop="description">
            <el-input
              clearable
              placeholder="补充说明"
              maxlength="300"
              show-word-limit
              v-model.trim="ruleForm.description"
              type="textarea"
              :disabled="disabled"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="disabled" type="success" @click="cancelLabel"
          >关闭</el-button
        >
        <template v-else>
          <el-button type="success" plain @click="cancelLabel">取 消</el-button>
          <el-button
            type="success"
            :loading="loading"
            @click="confirmLabel('ruleForm')"
            >确认</el-button
          >
        </template>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addAgreement, eidtAgreement } from '@/api/agreementManagement/index' // 接口
import KindEditor from '@common/Kindeditor/index'
import { validateSpecial } from '@utils/validate'
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  name: 'agreementDialog',
  msg: '协议管理-新增/编辑弹窗',
  props: ['dialogData'],
  components: {
    KindEditor
  },
  computed: {
    disabled() {
      return this.type === 'check'
    }
  },
  data() {
    return {
      type: 'add', // add-新增;edit-编辑；copy-复制
      id: '',
      title: '',
      isNotCopy: false,
      loading: false,
      // 协议类型
      typeList: [],
      // 展示端
      showList: [],
      ruleForm: {
        version: '', // 版本号
        content: '', // 协议内容
        type: '', // 协议类型
        terminalType: [], // 展示端
        description: '' // 补充说明
      },
      rules: {
        version: { required: true, message: '版本号不能为空', trigger: 'blur' },
        content: {
          required: true,
          message: '协议内容不能为空',
          trigger: 'blur'
        },
        type: {
          required: true,
          message: '协议类型不能为空',
          trigger: 'blur'
        },
        terminalType: {
          required: true,
          message: '展示端不能为空',
          trigger: 'blur'
        }
      },
      titleObj: {
        add: '新增协议',
        edit: '编辑协议',
        check: '查看协议',
        copy: '复制协议'
      },
      items:[
        'source',
        'preview',
        'wordpaste',
        '|',
        'justifyleft',
        'justifycenter',
        'justifyright',
        'justifyfull',
        'insertorderedlist',
        'insertunorderedlist',
        'indent',
        '|',
        'formatblock',
        'fontsize',
        'forecolor',
        'hilitecolor',
        'bold',
        'italic',
        'underline',
        'strikethrough'
      ]
    }
  },
  mounted() {
    this.getStatusList()
    this.type = this.dialogData.type
    this.title = this.titleObj[this.type]
    if (this.type !== 'add') {
      //查看、复制、编辑
      let {
        version,
        content,
        type,
        terminalTypeList,
        description,
        id
      } = this.dialogData.params
      this.ruleForm = {
        version,
        content,
        type,
        terminalType: terminalTypeList,
        description
      }
      this.id = id
    }
  },
  methods: {
    async getStatusList() {
      //协议类型
      this.typeList = await sysNormalDisable('protocol_type')
      // 展示端
      this.showList = await sysNormalDisable('protocol_terminal_type')
      if (this.type === 'add') {
        this.ruleForm.type = this.typeList[0].dictValue
      }
    },
    // 获取编辑器内容
    getContent(content) {
      this.ruleForm.content = content
    },
    /* 编辑时获取表单详情 */
    getFormData() {
      getEditSimplif(this.id, (response) => {
        this.ruleForm = { ...response }
      })
    },
    /* 确认提交 */
    confirmLabel(formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.subForm()
        } else {
          return false
        }
      })
    },
    /* 提交表单 */
    async subForm() {
      this.loading = true
      let params = { ...this.ruleForm }
      if (this.type === 'add' || this.type === 'copy') {
        // 新增
        addAgreement(
          params,
          (response) => {
            this.loading = false
            this.$emit('refresh')
            this.cancelLabel()
          },
          (response) => {
            this.loading = false
            this.$message.warning({
              message: response.message,
              type: 'warning'
            })
          }
        )
      } else {
        // 编辑
        eidtAgreement(
          this.id,
          params,
          (response) => {
            this.loading = false
            this.$emit('refresh')
            this.cancelLabel()
          },
          (response) => {
            this.loading = false
            this.$message.warning({
              message: response.message,
              type: 'warning'
            })
          }
        )
      }
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.id = null
      this.dialogData.isShow = false
    }
  }
}
</script>

<style lang="less">
#agreementDialog {
  label.el-radio {
    line-height: 40px;
  }
  .el-textarea {
    .el-textarea__inner {
      height: 70px;
      padding-bottom: 18px;
    }
    .el-input__count {
      display: inline-block;
      color: #909399;
      background: #fff;
      position: absolute;
      width: calc(100% - 10px);
      font-size: 12px;
      bottom: 1px;
      right: 1px;
      left: 1px;
      text-align: right;
      line-height: 20px;
    }
  }
}
</style>
